<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">
<title>海苔商城</title>
<link rel="stylesheet" href="../css/shop/index.css" type="text/css"/>
</head>

<body>
<div class="wrap">
<section class="page-head">
    <header>
        <div class="search-box">
            <div class="cont">
                <i class="search-icon"></i>
                <input type="text" placeholder="请输入商品关键字搜索" class="search-input" />
            </div>
        </div>
        <a href="javascript:;" class="menu-switch menu-switch-on"></a>
        <a href="javascript:;" class="card-icon">
            <span class="num">14</span>
        </a>
    </header>
    <nav>
        <ul class="nav-top fix">
            <li><a href="#"><i class="icon top-icon-0"></i> 推荐</a></li>
            <li><a href="#"><i class="icon top-icon-1"></i> 新品</a></li>
            <li><a href="#"><i class="icon top-icon-2"></i>热销</a></li>
            <li><a href="#"><i class="icon top-icon-3"></i> 分类</a></li>
        </ul>
    </nav>
</section>
<div class="main">
    <section class="recommend">
        <div class="goods-collection">
            <div class="cover">
                <img src="../images/detail_09.jpg" class="cover-img" />
                <div class="cont">
                    <h2 class="tit ell">这里是标题文字内容一排显示</h2>
                    <p class="line"></p>
                    <p class="desc">潮包任你选</p>
                    <a href="javascript:;" class="btn-0 white-line-btn">查看全部</a>
                </div>
                <div class="sjx"></div>
            </div>
            <div class="list">
                <ul class="fix">
                    <li>
                        <a href="#">
                            <img src="../images/share_logo.png" class="pic" />
                            <h4 class="tit ell">双肩包Hkj电脑</h4>
                            <p class="desc ell">这货的文字还有点长啊</p>
                            <p class="price">￥270</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../images/share_logo.png" class="pic" />
                            <h4 class="tit ell">双肩包Hkj电脑</h4>
                            <p class="desc ell">这货的文字还有点长啊</p>
                            <p class="price">￥270</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../images/share_logo.png" class="pic" />
                            <h4 class="tit ell">双肩包Hkj电脑</h4>
                            <p class="desc ell">这货的文字还有点长啊</p>
                            <p class="price">￥270</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../images/share_logo.png" class="pic" />
                            <h4 class="tit ell">双肩包Hkj电脑</h4>
                            <p class="desc ell">这货的文字还有点长啊</p>
                            <p class="price">￥270</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../images/share_logo.png" class="pic" />
                            <h4 class="tit ell">双肩包Hkj电脑</h4>
                            <p class="desc ell">这货的文字还有点长啊</p>
                            <p class="price">￥270</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../images/share_logo.png" class="pic" />
                            <h4 class="tit ell">双肩包Hkj电脑</h4>
                            <p class="desc ell">这货的文字还有点长啊</p>
                            <p class="price">￥270</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="index-box">
            <div class="index-bar">
                <a href="#" class="more"></a>
                <h2>热门活动</h2>
            </div>
            <div class="cont">
                <img src="../images/detail_09.jpg" height="160" width="100%" />
            </div>
        </div>
        <div class="all-goods">
            <div class="index-bar">
                <a href="#" class="more"></a>
                <h2>全部商品</h2>
            </div>
            <div class="goods">
                <ul class="fix goods-list">
                    <li>
                        <a href="#">
                            <img src="../images/logo.png" class="pic" />
                            <h4 class="tit ell">Beats music</h4>
                            <p class="desc ell">it is ok?i can say some things</p>
                            <p class="price"><span>￥179.00</span><span class="price-label hot-label">热销</span></p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../images/logo.png" class="pic" />
                            <h4 class="tit ell">Beats music</h4>
                            <p class="desc ell">it is ok?i can say some things</p>
                            <p class="price"><span>￥179.00</span><span class="price-label down-label">降价</span></p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../images/logo.png" class="pic" />
                            <h4 class="tit ell">Beats music</h4>
                            <p class="desc ell">it is ok?i can say some things</p>
                            <p class="price"><span>￥179.00</span><span class="price-label hot-label">热销</span></p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../images/logo.png" class="pic" />
                            <h4 class="tit ell">Beats music</h4>
                            <p class="desc ell">it is ok?i can say some things</p>
                            <p class="price"><span>￥179.00</span><span class="price-label down-label">降价</span></p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </section>
    <section class="news-goods dn">
        <ul class="new-goods-list">
            <li>
                <a href="#">
                    <img src="../images/logo.png" width="100%" class="pic" />
                    <h3 class="tit ell">Sutterhiem 最新款高逼格雨衣</h3>
                    <p class="desc ell">商品的描述我一句话</p>
                </a>
                <div class="fix bottom">
                    <a href="#" class="btn red-btn">买买买</a>
                    <p><span class="now-price">￥1999</span><span class="original-price">￥2321</span></p>
                </div>
            </li>
            <li>
                <a href="#">
                    <img src="../images/logo.png" width="100%" class="pic" />
                    <h3 class="tit ell">Sutterhiem 最新款高逼格雨衣</h3>
                    <p class="desc ell">商品的描述我一句话</p>
                </a>
                <div class="fix bottom">
                    <a href="#" class="btn red-btn">买买买</a>
                    <p><span class="now-price">￥1999</span><span class="original-price">￥2321</span></p>
                </div>
            </li>
            <li>
                <a href="#">
                    <img src="../images/logo.png" width="100%" class="pic" />
                    <h3 class="tit ell">Sutterhiem 最新款高逼格雨衣</h3>
                    <p class="desc ell">商品的描述我一句话</p>
                </a>
                <div class="fix bottom">
                    <a href="#" class="btn red-btn">买买买</a>
                    <p><span class="now-price">￥1999</span><span class="original-price">￥2321</span></p>
                </div>
            </li>
        </ul>
    </section>
    <section class="goods-class dn">
        <div class="class-item">
            <div class="pic">
                <a href="#">
                    <img src="../images/logo.png" />
                    <div class="opacity-bg"></div>
                    <h2>科技数码</h2>
                </a>
            </div>
            <div class="class-second-nav">
                <div class="sjx"></div>
                <ul class="fix">
                    <li><a href="#">轻便跑鞋</a> </li>
                    <li><a href="#">有氧运动</a> </li>
                    <li><a href="#">夏季装备</a> </li>
                    <li><a href="#">冬季运动</a> </li>
                    <li><a href="#">剧烈运动</a> </li>
                    <li><a href="#">听到呵呵</a> </li>
                </ul>
            </div>
        </div>
        <div class="class-item">
            <div class="pic">
                <a href="#">
                    <img src="../images/logo.png" />
                    <div class="opacity-bg"></div>
                    <h2>科技数码</h2>
                </a>
            </div>
            <div class="class-second-nav">
                <div class="sjx"></div>
                <ul class="fix">
                    <li><a href="#">轻便跑鞋</a> </li>
                    <li><a href="#">有氧运动</a> </li>
                    <li><a href="#">夏季装备</a> </li>
                    <li><a href="#">冬季运动</a> </li>
                    <li><a href="#">剧烈运动</a> </li>
                    <li><a href="#">听到呵呵</a> </li>
                </ul>
            </div>
        </div>
        <div class="class-item">
            <div class="pic">
                <a href="#">
                    <img src="../images/logo.png" />
                    <div class="opacity-bg"></div>
                    <h2>科技数码</h2>
                </a>
            </div>
            <div class="class-second-nav">
                <div class="sjx"></div>
                <ul class="fix">
                    <li><a href="#">轻便跑鞋</a> </li>
                    <li><a href="#">有氧运动</a> </li>
                    <li><a href="#">夏季装备</a> </li>
                    <li><a href="#">冬季运动</a> </li>
                    <li><a href="#">剧烈运动</a> </li>
                    <li><a href="#">听到呵呵</a> </li>
                </ul>
            </div>
        </div>
        <div class="class-item">
            <div class="pic">
                <a href="#">
                    <img src="../images/logo.png" />
                    <div class="opacity-bg"></div>
                    <h2>科技数码</h2>
                </a>
            </div>
            <div class="class-second-nav">
                <div class="sjx"></div>
                <ul class="fix">
                    <li><a href="#">轻便跑鞋</a> </li>
                    <li><a href="#">有氧运动</a> </li>
                    <li><a href="#">夏季装备</a> </li>
                    <li><a href="#">冬季运动</a> </li>
                    <li><a href="#">剧烈运动</a> </li>
                    <li><a href="#">听到呵呵</a> </li>
                </ul>
            </div>
        </div>
    </section>
    <section class="foot-section">
        <footer class="footer">
            <ul class="fix">
                <li>
                    <a href="#">
                        <i class="foot-icon-0"></i>
                        精选
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="foot-icon-1"></i>
                        晒物
                    </a>
                </li>
                <li>
                    <a href="#" class="on">
                        <i class="foot-icon-2"></i>
                        购物
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="foot-icon-3"></i>
                        我的
                    </a>
                </li>
            </ul>
        </footer>
    </section>
</div>
</div>

</body>
</html>
